<template>
	<view class="search">
		<!-- 搜索框 -->
		<view class="search-box">
			<uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
		</view>
		<!-- 搜索建议列表 -->
		<view class="sugg-list" v-if="searchResults.length">
			<view class="sugg-item" v-for="(item,index) in searchResults" :key="index"
				@click="gotoDetail(item.goods_id)">
				<view class="goods-name">
					{{item.goods_name}}
				</view>
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="history-box" v-else>
			<view class="history-title">
				<text>搜索历史</text>
				<uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
			</view>
			<view class="history-list">
				<uni-tag @click="gotoGoodsList(item)" class="tag" :text="item" v-for="(item,index) in historyList" :key="index"></uni-tag>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {onLoad} from '@dcloudio/uni-app'
	const timer = ref(null)
	const keyword = ref(null)
	const searchResults = ref([])
	const historyList = ref(uni.getStorageSync('historyList')||[])
	onLoad(()=>{
		
	})
	const input = (e) => {
		// console.log(e)
		clearTimeout(timer.value)
		timer.value = setTimeout(() => {
			keyword.value = e
			console.log(keyword.value)
			getSearchList()
		}, 500)
	}
	const getSearchList = async () => {
		if (keyword.value === '') {
			searchResults.value = []
			return
		}
		const {
			data: res
		} = await uni.$http.get('/api/public/v1/goods/qsearch', {
			query: keyword.value
		})
		if (res.meta.status !== 200) return uni.$showMsg()
		searchResults.value = res.message
		saveSearchHistory()
		// console.log(searchResults.value)
	}
	const gotoDetail = (id) => {
		uni.navigateTo({
			url:'/subpkg/goods_detail/goods_detail?goods_id=' + id
		})
	}
	const saveSearchHistory = () =>{
		historyList.value.unshift(keyword.value)
		historyList.value = [...new Set([...historyList.value])]
		uni.setStorageSync('historyList',historyList.value)
	}
	const cleanHistory = () =>{
		historyList.value = []
		uni.removeStorageSync('historyList')
	}
	const gotoGoodsList = (item) => {
		uni.navigateTo({
		    url: '/subpkg/goods_list/goods_list?query=' + item
		 })
	}
</script>

<style lang="scss" scoped>
	.search {
		.search-box {
			position: sticky;
			top: 0;
			z-index: 999;
		}

		.sugg-list {
			padding: 0 5px;

			.sugg-item {
				font-size: 12px;
				padding: 13px 0;
				border-bottom: 1px solid #efefef;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.goods-name {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-right: 3px;
				}
			}
		}
		.history-box{
			padding: 0 5px;
			.history-title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 40px;
				font-size: 13px;
				border-bottom: 1px solid #efefef;
			}
			.history-list{
				display: flex;
				flex-wrap: wrap;
				.tag{
					margin-top: 5px;
					margin-right: 5px;
				}
			}
		}
	}
</style>